<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {

            /**
             * 知识点：
             * 1. 操作任意属性
             *      attr(): 操作属性值为非布尔值的属性
             *      removeAttr()
             *      prop(): 专门操作属性值为布尔值的属性
             * 2. 操作 class 属性
             *      addClass()
             *      removeClass()
             * 3. 操作 HTML 代码/文本/值
             *      html()
             *      val()
            */

            /**
             * 1. 读取第一个 div 的 title 属性
            */
            // const title = $('div:first').attr('title')
            // console.log(title)

            /**
             * 2. 给所有的 div 设置 name 属性(value 为 atguigu)
            */
            // $('div').attr('name', 'atguigu')

            /**
             * 3. 移除所有 div 的 title 属性
            */
            // $('div').removeAttr('title')

            /**
             * 4. 给所有的 div 设置 class='guiguClass'
            */
            // $('div').attr('class', 'guiguClass')

            /**
             * 5. 给所有的 div 添加 class='abc'
            */
            // $('div').attr('class', 'abc')
            // $('div').addClass('abc')

            /**
             * 6. 移除所有 div 的 guiguClass 的 class
            */
            // $('div').removeClass('guiguClass')
            

            /**
             * 7. 得到最后一个 li 的标签体文本
            */
            // const html = $('ul > li:last').html()
            // console.log(html)

            /**
             * 8. 设置第一个 li 的标签体为 "<h1>mmmmmmmmm</h1>"
            */
            // $('ul > li:first').html('<h1>mmmmmmmmm</h1>')

            /**
             * 9. 得到输入框中的 value 值
            */
            // const value = $(':input:text').val()
            // console.log(value)

            /**
             * 10. 将输入框的值设置为 atguigu
            */
            // $(':input:text').val('atguigu')

            /**
             * 11. 点击'全选'按钮实现全选
            */
            $('button:first').click(() => {
                $(':input:checkbox').prop('checked', true)
            })

            /**
             * 12. 点击'全不选'按钮实现全不选
            */
            $('button:last').click(() => {
                // $(':input:checkbox').prop('checked', false)
                $(':input:checkbox').removeAttr('checked')
            })

        })
    </script>
</head>

<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>

    <input type="text" name="username" value="guiguClass" />
    <br>
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <button>选中</button>
    <button>不选中</button>
</body>

</html>